<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'default'
  },
  heightAuto: {
    type: Boolean,
    default: false
  },
  required: {
    type: Boolean,
    default: false
  },
  block: {
    type: Boolean,
    default: false
  },
  prefixStyle: {
    type: Object,
    default: () => ({})
  }

})

</script>

<template>
  <div class="my-form-border"
       :class="{'default':size=='default','large':size=='large','small':size=='small','height-auto':heightAuto,'block':block}">

    <div class="prefix" :class="{'my-none': title == ''}" :style="prefixStyle">
      <slot name="prefix">
        <div class="require" v-if="required">*</div>
        <div>
          <el-text class="mx-1">{{ title }}</el-text>
        </div>
      </slot>
    </div>

    <div class="my-flex-1">
      <slot></slot>
    </div>

    <div class="after">
      <slot name="after">

      </slot>
    </div>


  </div>
</template>

<style scoped lang="scss">
::v-deep(.el-cascader) {
  width: 100% !important;
}

::v-deep(.el-input__wrapper) {
  box-shadow: none !important;
}

::v-deep(.el-select__wrapper) {
  box-shadow: none !important;
}

::v-deep(.el-date-editor.el-input) {
  width: inherit !important;
}

.my-form-border {
  &.no_padding_left {
    ::v-deep(.el-input__wrapper) {
      padding-left: 0 !important;
    }

    ::v-deep(.el-select__wrapper) {
      padding-left: 0 !important;
    }
  }
}


::v-deep( .el-date-editor.el-input__wrapper) {
  width: inherit !important;
}

::v-deep( .el-date-editor .el-range__icon) {
  display: none !important;
}


.is-error {
  .my-form-border {
    border: 1px solid #f81717;

  }
}

.my-form-border {

  width: 100%;

  height: 32px;

  border: 1px solid #d9d9d9;
  border-radius: 6px;

  display: flex;
  align-items: center;

  transition: all 0.2s;

  &.block {
    width: 100%;
  }

  &.default {
    min-height: 32px !important;
  }

  &.large {
    min-height: 40px !important;
  }

  &.small {
    min-height: 24px !important;
  }

  &.height-auto {
    height: auto !important;
  }

  .prefix {
    flex-shrink: 0;
    padding-left: 15px;

    display: flex;
    align-items: center;

    .require {
      color: red;
      padding-right: 2px;
      margin-top: 3px;
    }
  }

  .after {
    padding-right: 3px;
  }

  &:hover, &:focus-within {
    border-color: #4096ff;

  }

  &:focus-within {
    outline-style: none;
    box-shadow: 0 0 0 5px rgba(5, 145, 255, .1);
  }

  .p-l-11 {
    padding-left: 11px;
  }

  .my-flex-1 {
    flex: 1;
    display: flex;
    align-items: center;
  }


}

</style>